  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <script src="//code.jquery.com/jquery-2.0.0.js"></script>
      <style>

          .airports {
          fill: #036;
          stroke: #6cb0e0;
          stroke-width: 0.5px;
          stroke-linecap: round;
          stroke-linejoin: round;
          vector-effect: non-scaling-stroke;
                    }

          .arcs path {
          stroke-width: 1.5px;
          stroke: #73b6e6;
          opacity: 0.5;
          pointer-events: none;
          fill: none;
                    }

          circle {
          fill: steelblue;
          stroke: white;
          stroke-width: 1.5px;
                      }

          .circle path {
          cursor: pointer;
          fill: #eee;
          stroke: #666;
          stroke-width: 1.5px;
                       }
      </style>
    </head>
    <body bgcolor="MintCream">
      <div id="map">

      </div>
      <script src="//d3js.org/d3.v3.min.js"></script>
      <script src="//d3js.org/topojson.v1.min.js"></script>


      <div id="us_states">
      </div>




  <script type="text/javascript">

  (function() {
  var arcdata = [
    {
      sourceLocation: [-96.682,32.52],
      targetLocation: [-122.417,37.783]
    },
    {
      sourceLocation: [-96.682,32.52],
      targetLocation: [-121.505,40.488]
    },
    {
      sourceLocation: [-86.682,39.52],
      targetLocation: [-122.682,45.52]
    },
    {
      sourceLocation: [-86.682,39.52],
      targetLocation: [-86.682,39.52]
    },
    {
      sourceLocation: [-122.682,45.52],
      targetLocation: [-96.682,32.52]
    },
    {
      sourceLocation: [-122.682,45.52],
      targetLocation: [-73.778,40.63]
    },
    {
      sourceLocation: [-86.682,39.52],
      targetLocation: [-122.417,37.783]
    },
    {
      sourceLocation: [-73.778,40.63],
      targetLocation: [-122.417,37.783]
    },
    {
      sourceLocation: [-96.682,32.52],
      targetLocation: [-86.682,39.52]
    },
    {
      sourceLocation: [-122.682,45.52],
      targetLocation: [-96.682,32.52]
    }
   
  ]
      var m_width = $("#us_states").width(),
          width = 900,
          height = 600,
          country,
          state;

      var projection = d3.geo.albersUsa()
          .scale(900)
          .translate([width / 2, height / 2])
          .precision(.1);

      var path = d3.geo.path()
          .projection(projection);



      var svg = d3.select("#us_states").append("svg")
          .attr("preserveAspectRatio", "xMidYMid")
          .attr("viewBox", "0 0 " + width + " " + height)
          .attr("width", m_width)
          .attr("height", m_width * height / width);



   d3.json("us.json", function(error, us) {
    if (error) return console.error(error);
    console.log(us);

    svg.selectAll("path")
        .data(topojson.feature(us, us.objects.states).features)
        .enter()
        .append("path")
        .attr("d", path)
        .attr("fill", "LightGray")
        .attr("stroke", "White")
        .on("mouseover", function(d) {
            d3.select(this).style("fill", "LightBlue");
            })                  
        .on("mouseout", function(d) {
             d3.select(this).style("fill", "LightGray");
            });




        var plane = svg.append("path")
                           .attr("class", "plane")
                           .attr("transform", "scale(0.7)")
                           .style({
                            'stroke-width':"0",
                            'fill':"#73b6e6"
                           })
                           .attr("d", "m25.21488,3.93375c-0.44355,0 -0.84275,0.18332 -1.17933,0.51592c-0.33397,0.33267 -0.61055,0.80884 -0.84275,1.40377c-0.45922,1.18911 -0.74362,2.85964 -0.89755,4.86085c-0.15655,1.99729 -0.18263,4.32223 -0.11741,6.81118c-5.51835,2.26427 -16.7116,6.93857 -17.60916,7.98223c-1.19759,1.38937 -0.81143,2.98095 -0.32874,4.03902l18.39971,-3.74549c0.38616,4.88048 0.94192,9.7138 1.42461,13.50099c-1.80032,0.52703 -5.1609,1.56679 -5.85232,2.21255c-0.95496,0.88711 -0.95496,3.75718 -0.95496,3.75718l7.53,-0.61316c0.17743,1.23545 0.28701,1.95767 0.28701,1.95767l0.01304,0.06557l0.06002,0l0.13829,0l0.0574,0l0.01043,-0.06557c0,0 0.11218,-0.72222 0.28961,-1.95767l7.53164,0.61316c0,0 0,-2.87006 -0.95496,-3.75718c-0.69044,-0.64577 -4.05363,-1.68813 -5.85133,-2.21516c0.48009,-3.77545 1.03061,-8.58921 1.42198,-13.45404l18.18207,3.70115c0.48009,-1.05806 0.86881,-2.64965 -0.32617,-4.03902c-0.88969,-1.03062 -11.81147,-5.60054 -17.39409,-7.89352c0.06524,-2.52287 0.04175,-4.88024 -0.1148,-6.89989l0,-0.00476c-0.15655,-1.99844 -0.44094,-3.6683 -0.90277,-4.8561c-0.22699,-0.59493 -0.50356,-1.07111 -0.83754,-1.40377c-0.33658,-0.3326 -0.73578,-0.51592 -1.18194,-0.51592l0,0l-0.00001,0l0,0z");

        var arcs = svg.append("g")
              .attr("class","arcs");



        arcs.selectAll("path")
              .data(arcdata)
              .enter()
              .append("svg:path")
              .attr('d', function(d) { 
                return lngLatToArc(d, 'sourceLocation', 'targetLocation', 1); 

              })
              .transition('plane', 'arcs');
//////////////////////////////////////////// this is for the arcs that is defined above /////////////////
                          function lngLatToArc(d, sourceName, targetName, bend){
                              // If no bend is supplied, then do the plain square root
                              bend = bend || 1;
                              // `d[sourceName]` and `d[targetname]` are arrays of `[lng, lat]`
                              // Note, people often put these in lat then lng, but mathematically we want x then y which is `lng,lat`

                              var sourceLngLat = d[sourceName],
                                  targetLngLat = d[targetName];

                              if (targetLngLat && sourceLngLat) {
                                var sourceXY = projection( sourceLngLat ),
                                    targetXY = projection( targetLngLat );

                                // Uncomment this for testing, useful to see if you have any null lng/lat values
                                // if (!targetXY) console.log(d, targetLngLat, targetXY)
                                var sourceX = sourceXY[0],
                                    sourceY = sourceXY[1];

                                var targetX = targetXY[0],
                                    targetY = targetXY[1];

                                var dx = targetX - sourceX,
                                    dy = targetY - sourceY,
                                    dr = Math.sqrt(dx * dx + dy * dy)*bend;

                                // To avoid a whirlpool effect, make the bend direction consistent regardless of whether the source is east or west of the target
                                var west_of_source = (targetX - sourceX) < 0;
                                if (west_of_source) return "M" + targetX + "," + targetY + "A" + dr + "," + dr + " 0 0,1 " + sourceX + "," + sourceY;
                                return "M" + sourceX + "," + sourceY + "A" + dr + "," + dr + " 0 0,1 " + targetX + "," + targetY;
                                
                              } else {
                                return "M0,0,l0,0z";
                              }
                            }
//////////////////////////////////////////// added san francisco twice coz for some reason its not getting displayed when I place the arcs at the top /////////////////    
          var  sampleData = 
                       [{name: "San Francisco", coordinates: [-122.417,37.783], barheight: 100},
                        {name: "Sacramento", coordinates: [-121.505,40.488], barheight: 30},
                        {name: "Portland", coordinates: [-122.682,45.52], barheight: 50},
                        {name: "Indiana", coordinates: [-86.682,39.52], barheight: 50},
                        {name: "Texas", coordinates: [-96.682,32.52], barheight: 70},
                        {name: "NewYork", coordinates: [-73.778,40.63], barheight: 80},
                        {name: "San Francisco", coordinates: [-122.417,37.783], barheight: 100}             
                        ];

//////////////////////////////////////////// tried linear scaling /////////////////    
/*
var yScale = d3.scale.linear()
        .domain([0, d3.max(sampleData.barheight)])
        .range([0, height]);
*/
              bars = svg.selectAll("g")
              .data(sampleData)
              .enter()
              .append("g")
              .attr("class", "bars")
              .attr("transform", function(d) {return "translate(" + projection(d.coordinates) + ")";})
              
          //////////////////////////////////////////// tried tooltip but it didn't work ///////////////// 
              // .on('mouseover', function(d) {

              //     tooltip.transition()
              //         .style('opacity', .9)

              //     tooltip.html(d)
              //         .style('left', (d3.event.pageX - 35) + 'px')
              //         .style('top',  (d3.event.pageY - 30) + 'px')


              //     tempColor = this.style.fill;
              //     d3.select(this)
              //         .style('opacity', .5)
              //         .style('fill', 'yellow')
              // })

              // .on('mouseout', function(d) {
              //     d3.select(this)
              //         .style('opacity', 1)
              //         .style('fill', "tomato")
              // })
              ;

     
    
                bars.append("rect")
                    .attr('width', 6)
                    .attr('height',  5)
                    .attr("class", "bars")
                    .style("fill", "tomato")
                    .attr("transform", "rotate(180)")
                    .transition()
                    .delay(function(d, i) {
                          return i * 20;
                      })
                      .duration(20000) 
                      .attr('height',  function(d) {return d.barheight})

//////////////////////////////////////////// tried linear scaling /////////////////
/*
      .attr('height',  function(d) {return yScale(d);
      })
*/

    
                  bars.append("text")
                      .style({
                              'fill':'#050505',
                              'font-family':'sans-serif',
                              'font-size':'7px'
                           })  
                           .attr("dy", ".80em")
                      .attr("text-anchor", "start") // set anchor y justification
                      .text(function(d) {return d.name}); 







//////////////////////////////////////////// tried flight transition /////////////////    

// function transition(plane, arcs) {
//   var l = arcs.node().getTotalLength();
//   plane.transition()
//        .duration(5000)
//        .attrTween("transform", delta(arcs.node()));
// }
  
// function delta(path) {
//   var l = path.getTotalLength();
//   return function(i) {
//     return function(t) {
//       var p = path.getPointAtLength(t * l);
//       return "translate(" + p.x + "," + p.y + ")";
//     }
//   }
// }

//////////////////////////////////////////// tried circle transition /////////////////
// var pathArc = svg.append("svg:pathArc")
//     .attr("d", d3.svg.arc()
//     .innerRadius(h / 4)
//     .outerRadius(h / 3)
//     .startAngle(0)
//     .endAngle(Math.PI));

// var circle = svg.append("svg:circle")
//     .attr("r", 6.5)
//     .attr("transform", "translate(0," + -h / 3 + ")");

// function transition() {
//   circle.transition()
//       .duration(5000)
//       .attrTween("transform", translateAlong(pathArc.node()))
//       .each("end", transition);
// }

// transition();

// // Returns an attrTween for translating along the specified path element.
// function translateAlong(pathArc) {
//   var l = pathArc.getTotalLength();
//   return function(d, i, a) {
//     return function(t) {
//       var p = pathArc.getPointAtLength(t * l);
//       return "translate(" + p.x + "," + p.y + ")";
//     };
//   };
// }


  });

      
//////////////////////////////////////////// function that resizes the window /////////////////

  $(window).resize(function() {
        var w = $("#us_states").width();
        svg.attr("width", w);
        svg.attr("height", w * height / width);
      });

  })();
  </script>
  </body>
  </html>